<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>rAF获取显示器帧率</title>
</head>
<body>
<div>当前刷新率:<span id="result">-1Hz</span></div>

<script>
  // 刷新率 = 60Hz：每秒60张画面，一张画面1/60秒
  function init() {
    let lastTime = 0, count = 0; // count用于控制更新dom的频率
    let targetEle = document.getElementById('result')
    const countFPS = (timeStamp) => {
      let fps = Math.round(1000 / (timeStamp - lastTime))
      lastTime = timeStamp
      if (count++ > (fps / 2)) {
        targetEle.innerText = fps + 'Hz'
        count = 1
      }
      requestAnimationFrame(countFPS)
    }
    requestAnimationFrame(countFPS)
  }

  init()
</script>
</body>
</html>
